<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批次管理</title>
    <link rel="stylesheet" href="../utils/bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <script src="../utils/bootstrap-5.3.3-dist/js/bootstrap.min.js"></script>
    <!--    时间选择器工具-->
    <link rel="stylesheet" href="../utils/flatpickr/flatpickr.min.css">
    <script src="../utils/flatpickr/flatpickr.min.js"></script>
    <link rel="stylesheet" href="../utils/icon/iconfont.css">
    <link rel="stylesheet" href="../css/shared.css">
    <style>
        /*中部布局*/
        .central-layout {
            display: grid;
            grid-template-rows: 40px 550px;
            width: 100%;
            margin: 0 auto;
        }

        /*中部底部布局*/
        .central-bottom-layout {
            display: grid;
            grid-template-columns: 2fr 8fr;
            width: 100%;
        }

        /*中部顶部*/
        .central-top {
            margin-left: 50px;
            font-weight: bold;
        }

        /*中部底部右部分布局*/
        .c-b-right-layout {
            display: grid;
            grid-template-rows: 50px 450px 50px;
            width: 95%;
            margin: 0 auto;
        }

        /*中部底部左部分布局*/
        .c-b-left-layout {
            border: 1px solid black;
            display: grid;
            height: 550px;
            grid-template-rows: auto 1fr;
        }

        /*中部底部右部分头部布局*/
        .c-b-r-head {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: 5px;
            justify-content: center;
        }

        /*左边菜单布局*/
        .batch-menu-element {
            background-color: #c6c7c8;
            border: 1px solid black;
            width: 80%;
            margin: 10px auto;
            display: grid;
            grid-template-columns: 1fr 60px;
            justify-items: center;
            align-items: center;
        }

        /*
        鼠标变成可点击
         */
        .batch-menu-element:hover {
            cursor: pointer;
        }

        .batch-menu-title {
            border-bottom: 1px solid black;
            font-size: large;
            font-weight: bold;
            text-align: center;
        }

        .batch-menu-body {
            overflow-y: auto;
        }

        /* 调换弹窗布局*/
        .update-dialog-body {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 0 5px;
        }

        .update-dialog-body-head {
            display: flex;
            justify-content: space-evenly;
        }

    </style>
</head>
<body>
<div class="body-grid">
    <!--头部-->
    <div class="header-grid">
        <!--    返回按钮-->
        <div>
            <!--            <button class="btn btn-secondary iconfont go-back-button" onclick="window.location.href='card-issuance.html';">-->
            <!--                &#xe623;-->
            <!--            </button>-->
        </div>
        <!--    标题-->
        <div class="page-title" id="page-title">
            <script>
                document.getElementById("page-title").innerText=window.sessionStorage.getItem("competitionName")
                +"--批次管理"
            </script>
        </div>
        <div></div>
    </div>
    <!--中部-->
    <div class="central-layout">
        <div>
            <!--            顶部导航栏-->
            <div class="btn-group">
                <button type="button" class="btn btn-primary" onclick="window.location.href='batch.html'">批次管理
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='rule.html'">规则设置
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='start-game.html'">
                    开始比赛
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='calculate-score.html'">
                    成绩计算
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='replace-card.html'">补卡
                </button>
            </div>
            <span class="central-top" id="project-name-id">比赛项目:</span>
            <span class="central-top" id="project-time-id">比赛时间:</span>
        </div>
        <div class="central-bottom-layout">
            <div class="c-b-left-layout">
                <div class="batch-menu-title">
                    比赛项目
                </div>
                <div class="batch-menu-body">
                    <!--                    <div class="batch-menu-element">-->
                    <!--                        <div>项目1</div>-->
                    <!--                        <div>已完成</div>-->
                    <!--                    </div>-->
                </div>
            </div>
            <div class="c-b-right-layout">
                <div class="c-b-r-head">
                    <!--                搜索框组件-->
                    <div style="width: 380px;margin: auto">
                        <div class="input-group">
                            <input id="search-input" type="text" class="form-control" placeholder="按选手姓名、组别、参赛单位、批次搜索 . . .">
                            <button class="btn btn-outline-secondary iconfont" type="button" onclick="showSearch()">
                                &#xe60a;
                            </button>
                        </div>
                    </div>
                    <div>
                        <label>第一批开始时间:
                            <input id="first-start-time" placeholder="时:分:秒" style="width: 80px">
                        </label>
                    </div>
                    <div>
                        <label>
                            间隔时间(秒):
                            <input id="interval" type="text" style="width: 30px" maxlength="3">
                        </label>
                    </div>
                    <button class="btn btn-sm btn-primary" onclick="doBatch()" id="makeBatch" >
                        进行分批
                    </button>
                    <button class="btn btn-sm btn-primary" onclick="downloadByUnit()">
                        按参赛单位导出批次表
                    </button>
                    <button id="download-by-order" class="btn btn-sm btn-primary" onclick="downloadBySequence()">
                        按批次号导出批次表
                    </button>
                </div>
                <div class="table-responsive">
                    <table id="batch-person-table" class="table table-sm table-bordered text-center">
                        <thead>
                        <tr>
                            <th>批次</th>
                            <th>选手号码</th>
                            <th>姓名</th>
                            <th>参赛单位</th>
                            <th>比赛项目</th>
                            <th>组别</th>
                            <th>出发时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="batch-person-tbody" class="table-group-divider">
                        </tbody>
                    </table>
                    <table id="batch-relay-table" class="table table-sm table-bordered text-center"
                           style="display: none">
                        <thead>
                        <tr>
                            <th>批次</th>
                            <th>选手号码</th>
                            <th>姓名</th>
                            <th>接力队伍</th>
                            <th>参赛单位</th>
                            <th>比赛项目</th>
                            <th>组别</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="batch-relay-tbody" class="table-group-divider">
                        </tbody>
                    </table>
                </div>
                <div>
                    <!--    分页组件-->
                    <ul class="pagination page-ul-flex" id="pagination">
                    </ul>
                </div>
            </div>

        </div>

    </div>
    <!--尾部-->
    <div class="footer-grid">
        <!--网格留空-->
        <div></div>
        <!--进度条-->
        <div id="progress-bar" class="progress-bar-flex">
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">新增赛事</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">新增项目</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">设置组别</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">导入选手</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">下发号码</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">制卡</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">签到</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">批次管理</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">规则设置</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">开始比赛</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">成绩计算</div>
                <i class="iconfont progress-bar-arrow" style="visibility: hidden;">&#xe604;</i>
            </div>
        </div>
        <!--   占位不能删-->
        <div>
        </div>
    </div>
</div>
<!--警告-->
<div id="warn-dialog" class="my-dialog my-dialog-smaller" style="display: none">
    <div class="my-dialog-header">
        <!--                    标题占位-->
        <span>错误警告</span>
        <button type="button" class="btn-close close-icon"
                onclick="closeDialog('warn-dialog')"></button>
    </div>
    <div class="my-dialog-body">
        <span>第一次开始时间或时间间隔未填写正确！</span>
    </div>
    <div class="my-dialog-footer">
        <button type="button" class="btn btn-primary btn-sm my-dialog-ft-btn"
                onclick="closeDialog('warn-dialog')">确认
        </button>
    </div>
</div>
<!--调换批次弹窗-->
<div id="update-dialog" class="my-dialog" style="display: none">
    <div class="my-dialog-header">
        <!--                    标题占位-->
        <span>调换批次</span>
        <button type="button" class="btn-close close-icon"
                onclick="closeDialog('update-dialog')"></button>
    </div>
    <div class="my-dialog-body update-dialog-body">
        <div class="update-dialog-body-head">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div>可调换名单：</div>
        <div>
            <table id="update-table" class="table table-sm table-bordered text-center">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>选手号码</th>
                    <th>批次</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="update-tbody" class="table-group-divider">
                </tbody>
            </table>
        </div>
    </div>
    <div class="my-dialog-footer">
    </div>
</div>
<script src="../js/pages.js"></script>
<script src="../api/urls.js"></script>
<script src="../js/dialog.js"></script>
<script src="../js/progress.js"></script>
<script>
    updateProgress("progress-bar", BATCH_PROGRESS);

    //页码
    let pageNum = 1;
    //一页多少条
    let pageSize = 20;
    //总条数
    let total;
    //总页数
    let pages;
    //请求记录
    let records;
    //搜索内容
    let searchAll;
    //单位id
    let projectId;
    //是否是接力
    let isRelay;
    //是否完成
    let isFinished;
    //项目时间
    let projectTime;

    //使用flatpickr自定义时间选择器
    window.flatpickr("#first-start-time", {
        enableTime: true, // 启用时间选择
        noCalendar: true, // 不显示日期选择器，只显示时间选择器
        enableSeconds: true, // 启用秒的选择
        time_24hr: true, // 使用24小时制
        dateFormat: "H:i:S", // 设置日期格式为仅包含时间（小时:分钟:秒）
    });

    /**
     * 按批次号导出批次表
     */
    async function downloadBySequence(){
        let url1 = new URL(BATCH_URL + "/downloadBySequence");
        url1.searchParams.set("projectId", projectId);
        await fetch(url1).then(resp => {
            return resp.blob();
        }).then(blob => {
            // 创建一个指向 Blob 的 URL
            const url = window.URL.createObjectURL(blob);

            // 创建 <a> 元素
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = '按批次号导出的批次表.xlsx'; // 设置下载的文件名

            // 添加 <a> 到文档中，并触发点击事件
            document.body.appendChild(a);
            a.click();

            // 清理资源
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        });
    }

    /**
     * 按单位导出批次表
     */
    async function downloadByUnit(){
        let url1 = new URL(BATCH_URL + "/downloadByUnit");
        url1.searchParams.set("projectId", projectId);
        await fetch(url1).then(resp => {
            return resp.blob();
        }).then(blob => {
            // 创建一个指向 Blob 的 URL
            const url = window.URL.createObjectURL(blob);

            // 创建 <a> 元素
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = '按参赛单位导出的批次表.xlsx'; // 设置下载的文件名

            // 添加 <a> 到文档中，并触发点击事件
            document.body.appendChild(a);
            a.click();

            // 清理资源
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        });
    }

    /**
     * 打开调换批次弹窗
     */
    async function openUpdateDialog(record){
        let bodyHead = document.querySelector(".update-dialog-body-head");
        bodyHead.children[0].textContent = "姓名：" + record.athleteName;
        bodyHead.children[1].textContent = "选手号码：" + record.number;
        if(record.sequence===2147483647){
            bodyHead.children[2].textContent = "批次：替补";
        }else {
            bodyHead.children[2].textContent = "批次：" + record.sequence;
        }

        let updateRecords;
        let url = new URL(BATCH_URL+"/getExchange");
        url.searchParams.set("batchId",record.batchId);
        await fetch(url).then(resp=>{return resp.json()}).then(result=>{
            updateRecords=result;
        })
        let updateTbody = document.getElementById("update-tbody");
        updateTbody.innerHTML = "";
        for (let updateRecord of updateRecords) {
            let uTr = document.createElement("tr");
            // uTr.dataset.batchId = updateRecord.batchId;
            let uTd1 = document.createElement("td");
            uTd1.textContent = updateRecord.name;
            let uTd2 = document.createElement("td");
            uTd2.textContent = updateRecord.number;
            let uTd3 = document.createElement("td");
            if (updateRecord.sequence === 2147483647) {//java的最大int值
                uTd3.textContent = "替补";
            } else {
                uTd3.textContent = updateRecord.sequence;
            }
            let uTd4 = document.createElement("td");
            let uButton = document.createElement("button");
            uButton.classList.add("btn", "btn-primary", "btn-sm", "iconfont");
            uButton.textContent = "调换";
            uButton.addEventListener("click", async () => {
                let uBodyObj = {};
                uBodyObj.fromBatchId = record.batchId;
                uBodyObj.toBatchId = updateRecord.batchId;
                uBodyObj.projectId = projectId;
                await fetch(BATCH_URL + UPDATE_URL, {
                    method: "POST",
                    headers: new Headers({"Content-Type": "application/json"}),
                    body: JSON.stringify(uBodyObj)
                });
                closeDialog("update-dialog");
                await showPage();
            })
            uTd4.append(uButton);
            uTr.append(uTd1, uTd2, uTd3, uTd4);
            updateTbody.append(uTr);
        }
        openDialog("update-dialog");
    }

    /**
     *进行分批
     */
    async function doBatch() {
        if (isRelay) {
            let url = new URL(BATCH_URL + "/doRelayBatch");
            url.searchParams.set("projectId", projectId);
            await fetch(url, {
                method: "POST"
            });
            await getMenu();
            isFinished=true;
            await showSearch();
        } else {
            let startTime = document.getElementById("first-start-time");
            let interval = document.getElementById("interval");
            if (startTime.value && interval.value && interval.value.trim()) {
                let bodyObject = {};
                bodyObject.projectId = projectId;
                bodyObject.startTime = startTime.value;
                bodyObject.interval = interval.value;
                await fetch(BATCH_URL + "/doPersonBatch", {
                    method: "POST",
                    headers: new Headers({"Content-Type": "application/json"}),
                    body: JSON.stringify(bodyObject)
                })
                await getMenu();
                isFinished=true;
                await showSearch();
            } else {//核验错误
                openDialog("warn-dialog");
            }
        }
    }

    /**
     * 渲染目录
     */
    function drawMenu(dataList) {
        let menuBody = document.querySelector(".batch-menu-body");
        menuBody.innerHTML = "";
        for (let data of dataList) {
            let divP = document.createElement("div");
            divP.classList.add("batch-menu-element");
            // divP.dataset.unitId=data.unitId;
            // divP.dataset.unfinishedNum=data.unfinishedNum;
            let divName = document.createElement("div");
            divName.textContent = data.projectName;
            let divStatus = document.createElement("div");
            if (data.isFinished) {
                divStatus.textContent = "已完成";
            } else {
                divStatus.textContent = "未完成";
            }
            divP.append(divName, divStatus);
            divP.addEventListener("click", async () => {
                projectTime=data.startTime;
                projectId = data.projectId;
                isFinished = data.isFinished;
                isRelay = data.isRelay;
                let pName = document.getElementById("project-name-id");
                pName.textContent = "比赛项目：" + data.projectName;
                let pTime = document.getElementById("project-time-id");
                pTime.textContent = "比赛时间：" + data.startTime.split("T")[0] + " " + data.startTime.split("T")[1];
                let fsTime = document.getElementById("first-start-time");
                let interval = document.getElementById("interval");
                fsTime.value = null;
                interval.value = null;
                let downloadByOrder = document.getElementById("download-by-order");
                if (isRelay) {
                    fsTime.parentElement.parentElement.style.display = "none";
                    interval.parentElement.parentElement.style.display = "none";
                    downloadByOrder.style.display = "none";
                } else {
                    fsTime.parentElement.parentElement.removeAttribute("style");
                    interval.parentElement.parentElement.removeAttribute("style");
                    downloadByOrder.removeAttribute("style");
                }
                let searchInput = document.getElementById("search-input");
                searchInput.value = null;
                searchAll = searchInput.value;
                await showSearch();
            })
            menuBody.append(divP);
        }
    }

    /**
     *生成目录
     */
    async function getMenu() {
        let url = new URL(BATCH_URL + "/getMenu");
        url.searchParams.set("competitionId", window.sessionStorage.getItem("competitionId"));
        await fetch(url).then(resp => {
            return resp.json()
        }).then(result => {
            drawMenu(result);
        });
    }

    if (window.sessionStorage.getItem("competitionId")) {
        (async () => {
            await getMenu();
            let menuBody = document.querySelector(".batch-menu-body");
            if (menuBody.children.length !== 0) {
                menuBody.firstElementChild.click();
            }
        })();
    }

    /**
     * 点击搜索
     */
    async function showSearch() {
        pageNum = 1;
        await showPage();
    }

    /**
     * 渲染表格
     */
    function drawBatchTable(records) {
        let tableBody;
        let personTable = document.getElementById("batch-person-table");
        let relayTable = document.getElementById("batch-relay-table");
        if (isRelay) {
            tableBody = document.getElementById("batch-relay-tbody");
            personTable.style.display = "none";
            relayTable.removeAttribute("style");
            tableBody.innerHTML = "";
            for (let record of records) {
                let trElement = document.createElement("tr");
                trElement.dataset.batchId = record.batchId;
                let tdElement1 = document.createElement("td");
                if (record.sequence === 2147483647) {//java的最大int值
                    tdElement1.textContent = "替补"
                } else {
                    tdElement1.textContent = record.sequence;
                }
                let tdElement2 = document.createElement("td");
                tdElement2.textContent = record.number;
                let tdElement3 = document.createElement("td");
                tdElement3.textContent = record.athleteName;
                let tdElement4 = document.createElement("td");
                tdElement4.textContent = record.teamName;
                let tdElement5 = document.createElement("td");
                tdElement5.textContent = record.unitName;
                let tdElement6 = document.createElement("td");
                tdElement6.textContent = record.projectName;
                let tdElement7 = document.createElement("td");
                tdElement7.textContent = record.groupName;
                let tdElement8 = document.createElement("td");
                let button1 = document.createElement("button");
                button1.classList.add("btn", "btn-primary", "btn-sm", "iconfont");
                button1.textContent = "\u{e6f7}调换批次";
                if(new Date(projectTime).getTime() > new Date().getTime()){
                    button1.addEventListener("click", async () => {
                        await openUpdateDialog(record);
                    });
                    if (!isFinished) {
                        button1.disabled = true;
                    }
                }else{
                    button1.disabled = true;
                }
                
                tdElement8.append(button1);
                trElement.append(tdElement1, tdElement2, tdElement3, tdElement4, tdElement5, tdElement6, tdElement7, tdElement8);
                tableBody.append(trElement);
            }
        } else {
            tableBody = document.getElementById("batch-person-tbody");
            relayTable.style.display = "none";
            personTable.removeAttribute("style");
            tableBody.innerHTML = "";
            for (let record of records) {
                let trElement = document.createElement("tr");
                trElement.dataset.batchId = record.batchId;
                let tdElement1 = document.createElement("td");
                tdElement1.textContent = record.sequence;
                let tdElement2 = document.createElement("td");
                tdElement2.textContent = record.number;
                let tdElement3 = document.createElement("td");
                tdElement3.textContent = record.athleteName;
                let tdElement4 = document.createElement("td");
                tdElement4.textContent = record.unitName;
                let tdElement5 = document.createElement("td");
                tdElement5.textContent = record.projectName;
                let tdElement6 = document.createElement("td");
                tdElement6.textContent = record.groupName;
                let tdElement7 = document.createElement("td");
                if (record.startTime) {
                    tdElement7.textContent = record.startTime.split("T")[1];
                }
                let tdElement8 = document.createElement("td");
                let button1 = document.createElement("button");
                button1.classList.add("btn", "btn-primary", "btn-sm", "iconfont");
                button1.textContent = "\u{e6f7}调换批次";
                if(new Date(projectTime).getTime() > new Date().getTime()){
                    if (!isFinished) {
                        button1.disabled = true;
                    }
                    button1.addEventListener("click", async () => {
                        await openUpdateDialog(record);
                    });
                }else{
                    button1.disabled = true;
                }
                
                tdElement8.append(button1);
                trElement.append(tdElement1, tdElement2, tdElement3, tdElement4, tdElement5, tdElement6, tdElement7, tdElement8);
                tableBody.append(trElement);
            }
        }

    }

    //实现分页的方法
    async function getPage(pageNum, pageSize) {
        //判断项目时间决定是否分批
        if(new Date(projectTime).getTime() > new Date().getTime()){
            document.getElementById("makeBatch").disabled = false
        }else{
            document.getElementById("makeBatch").disabled=true
        }



        let searchInput = document.getElementById("search-input");
        searchAll = searchInput.value;
        let url;
        if (isRelay) {
            url = new URL(BATCH_URL + "/searchAllRelay");
        } else {
            url = new URL(BATCH_URL + "/searchAllPerson");
        }
        url.searchParams.set("pageNum", pageNum);
        url.searchParams.set("pageSize", pageSize);
        url.searchParams.set("projectId", projectId);
        url.searchParams.set("searchAll", searchAll);
        await fetch(url).then(response => {
            if (response.ok && response.headers.get("Content-Type") === "application/json") {
                return response.json();
            } else {
                throw new Error(`未知相应状态 ${response.status}或Content-Type：${response.headers.get("Content-Type")}`);
            }
        }).then(pageInfo => {
            pages = pageInfo.pages;
            total = pageInfo.total;
            records = pageInfo.records;
            drawBatchTable(records);
            console.log("11111")
        }).catch(error => {
            console.log("分页错误：", error);
        });

    }

    //上一页
    async function prePage() {
        pageNum = pageNum - 1;
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages);
    }

    //下一页
    async function nextPage() {
        pageNum = pageNum + 1;
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages)
    }

    //点击切换
    async function handlePage(page) {
        if (page !== pageNum) {
            pageNum = page
            await getPage(pageNum, pageSize);
            createpage(pageNum, pageSize, total, pages);
        }

    }

    /**
     * 改变每页条数
     */
    async function changePageSize(value) {
        pageSize = Number(value);
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages);
    }

    // 创建分页组件
    async function showPage() {
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages);
    }


</script>
</body>
</html>